<template>
    <div class="layout">
        <div class="layout-header">
            <ul class="menus-ul clear">
                <li v-for="item in menus" :key="item.name" 
                    :class="{'active': item.name === currentName}"
                    @click="handleClickPage(item)">{{ item.title }}</li>
            </ul>
        </div>
        <div class="layout-body">
            <div class="body-left">
                <c-menus :menus-list="(menusObj[currentName] || {}).children || []"></c-menus>
            </div>
            <div class="body-content">

                <router-view></router-view>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                currentName: this.$route.name.split('-')[0],
            };
        },
        computed: {
            menus() {
                return this.$store.state.base.menus;
            },
            menusObj() {
                let obj = {};
                this.menus.forEach(m => {
                    obj[m.name] = m;
                });
                return obj;
            },
        },
        created() {
            if (this.$route.path === '/') {
                // 顶级路由跳转第一个模块
                this.currentName = this.menus[0].name;
            }
        },
        methods: {
            handleClickPage(item) {
                this.currentName = item.name;
                this.$router.push(item.path);
            }
        }
    };
</script>

<style scoped lang="less">
    @header-height: 40px;

    .layout {
        height: 100%;

        .layout-header {
            height:  @header-height;
            border-bottom: 1px solid #dedede;
            background: @color-base;
            color: #eee;
            box-sizing: border-box;
        }
        .layout-body {
            height: calc(100% -  @header-height);
            position: relative;

            .body-left {
                width: 150px;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
            }

            .body-content {
                margin-left: 160px;
                height: calc(100% - 20px);
                overflow: auto;
                padding: 10px;
            }
        }
    }

    .menus-ul {
        >li {
            float: left;
            padding: 0 10px;
            cursor: pointer;
            height:  @header-height - 1px;
            line-height: @header-height - 1px;

            &.active, &:hover {
                background: @color-base-hover;
                color: #fff;
            }
        }
    }
</style>
